Adwaita: more scale style fixes

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 501412d0e0023c2d4129e07f1f62a903a1a2efdf..3f54aa39d65fe2063fb76a059b39a9f6ec4fa256 100644 (file)
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2501,9 +2501,13 @@ scale {
   }
 
   &.fine-tune {
-    slider {
-      // something weird happening here
-      margin: -6px;
+    slider { margin: -6px; }
+
+    fill,
+    highlight,
+    trough {
+      border-radius: 5px;
+      -gtk-outline-radius: 7px;
     }
   }
 
@@ -2512,7 +2516,7 @@ scale {
     @extend %scale_trough;
 
     outline-offset: 2px;
-    -gtk-outline-radius: 4px;
+    -gtk-outline-radius: 5px;
   }
 
   // the colored part of the backing bit
@@ -2589,24 +2593,42 @@ scale {
   marks {
     color: gtkalpha(currentColor, 0.4);
 
-    @each $marks_pos, $marks_margin in (top, bottom),
-                                       (bottom, top),
-                                       (left, right),
-                                       (right, left) {
+    @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
+                                                     (bottom, bottom, top),
+                                                     (top, left, right),
+                                                     (bottom, right, left) {
+      &.#{$marks_class} {
+        margin-#{$marks_margin}: $_marks_distance;
+        margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
+      }
+    }
+  }
+
+  &.fine-tune marks {
+    @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
+                                                     (bottom, bottom, top),
+                                                     (top, left, right),
+                                                     (bottom, right, left) {
       &.#{$marks_pos} {
         margin-#{$marks_margin}: $_marks_distance;
-        margin-#{$marks_pos}: -($_marks_distance+$_marks_lenght);
+        margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght - 2px);
       }
     }
   }
 
-  &.horizontal  indicator {
-    min-height: $_marks_lenght;
-    min-width: 1px;
+  &.horizontal {
+    indicator {
+      min-height: $_marks_lenght;
+      min-width: 1px;
+    }
+    &.fine-tune indicator { min-height: ($_marks_lenght - 2px); }
   }
-  &.vertical indicator {
-    min-height: 1px;
-    min-width: $_marks_lenght;
+  &.vertical {
+    indicator {
+      min-height: 1px;
+      min-width: $_marks_lenght;
+    }
+    &.fine-tune indicator { min-width: ($_marks_lenght - 2px); }
   }
 
   // *WARNING* scale with marks madness following
@@ -2625,14 +2647,11 @@ scale {
                                (':backdrop', '-backdrop'),
                                (':backdrop:disabled', '-backdrop-insensitive') {
         @at-root %#{$marks_infix}-#{$dir_infix},
-        &.#{$dir_class} contents#{$nth_child} {
-          > trough > slider {
+        &.#{$dir_class} {
+          contents#{$nth_child} > trough > slider {
             &#{$state} {
               margin: -9px;
               $_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
-              //@warn $dir_class;
-              //@warn $marks_pos;
-              //@warn $_scale_asset; // uncomment for debuggin purpose...
               border-style: none;
               border-radius: 0;
 
@@ -2673,6 +2692,20 @@ scale {
               box-shadow: none;
             }
           }
+
+          &.fine-tune contents#{$nth_child} > trough > slider {
+            margin: -7px;
+
+            @if $dir_class == 'horizontal' {
+              @if $marks_infix == 'scale-has-marks-above' { margin-top: -11px; }
+              @else { margin-bottom: -11px; }
+            }
+
+            @else {
+              @if $marks_infix == 'scale-has-marks-above' { margin-left: -11px; }
+              @else { margin-right: -11px; }
+            }
+          }
         }
       }
     }

diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 05ff39c8d70a28c0c927506f0ebd295c0d3cf6ae..677d134c2b2906bd80d6668f5796a079bb9cb827 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -2648,20 +2648,7 @@ scale highlight, progressbar progress {
 scale {
   min-height: 10px;
   min-width: 10px;
-  padding: 12px;
-  /*
-      &.top {
-        margin-bottom: $_marks_distance;
-        margin-top: -($_marks_distance+$_marks_lenght);
-      }
-  
-      &.bottom {
-        margin-top: $_marks_distance;
-      }
-      &.left { margin-right: $_marks_distance; }
-      &.right { margin-left: $_marks_distance; }
-    }
-  */ }
+  padding: 12px; }
   scale fill,
   scale highlight {
     margin: -1px; }
@@ -2671,9 +2658,14 @@ scale {
     margin: -8px; }
   scale.fine-tune slider {
     margin: -6px; }
+  scale.fine-tune fill,
+  scale.fine-tune highlight,
+  scale.fine-tune trough {
+    border-radius: 5px;
+    -gtk-outline-radius: 7px; }
   scale trough {
     outline-offset: 2px;
-    -gtk-outline-radius: 4px; }
+    -gtk-outline-radius: 5px; }
   scale fill, scale fill:backdrop {
     background-color: #1c1f1f;
     box-shadow: none; }
@@ -2779,19 +2771,35 @@ scale {
     scale marks.bottom {
       margin-top: 6px;
       margin-bottom: -12px; }
-    scale marks.left {
+    scale marks.top {
       margin-right: 6px;
       margin-left: -12px; }
-    scale marks.right {
+    scale marks.bottom {
       margin-left: 6px;
       margin-right: -12px; }
+  scale.fine-tune marks.top {
+    margin-bottom: 6px;
+    margin-top: -10px; }
+  scale.fine-tune marks.bottom {
+    margin-top: 6px;
+    margin-bottom: -10px; }
+  scale.fine-tune marks.left {
+    margin-right: 6px;
+    margin-left: -10px; }
+  scale.fine-tune marks.right {
+    margin-left: 6px;
+    margin-right: -10px; }
   scale.horizontal indicator {
     min-height: 6px;
     min-width: 1px; }
+  scale.horizontal.fine-tune indicator {
+    min-height: 4px; }
   scale.vertical indicator {
     min-height: 1px;
     min-width: 6px; }
-  scale.color.horizontal trough > trough > slider, scale.horizontal contents:last-child:not(:only-child) > trough > slider {
+  scale.vertical.fine-tune indicator {
+    min-width: 4px; }
+  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider, scale.horizontal contents:last-child:not(:only-child) > trough > slider {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2802,7 +2810,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough > trough > slider:hover, scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover {
+  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-top: -11px; }
+  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:hover, scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2813,7 +2824,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough > trough > slider:active, scale.horizontal contents:last-child:not(:only-child) > trough > slider:active {
+  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-top: -11px; }
+  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:active, scale.horizontal contents:last-child:not(:only-child) > trough > slider:active {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2824,7 +2838,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough > trough > slider:disabled, scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled {
+  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-top: -11px; }
+  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:disabled, scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2835,7 +2852,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough > trough > slider:backdrop, scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop {
+  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-top: -11px; }
+  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:backdrop, scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2846,7 +2866,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough > trough > slider:backdrop:disabled, scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop:disabled {
+  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-top: -11px; }
+  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:backdrop:disabled, scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop:disabled {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2857,6 +2880,9 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
+  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-top: -11px; }
   scale.horizontal contents:first-child:not(:only-child) > trough > slider {
     margin: -9px;
     border-style: none;
@@ -2868,6 +2894,9 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
+  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-bottom: -11px; }
   scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover {
     margin: -9px;
     border-style: none;
@@ -2879,6 +2908,9 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
+  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-bottom: -11px; }
   scale.horizontal contents:first-child:not(:only-child) > trough > slider:active {
     margin: -9px;
     border-style: none;
@@ -2890,6 +2922,9 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
+  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-bottom: -11px; }
   scale.horizontal contents:first-child:not(:only-child) > trough > slider:disabled {
     margin: -9px;
     border-style: none;
@@ -2901,6 +2936,9 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
+  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-bottom: -11px; }
   scale.horizontal contents:first-child:not(:only-child) > trough > slider:backdrop {
     margin: -9px;
     border-style: none;
@@ -2912,6 +2950,9 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
+  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-bottom: -11px; }
   scale.horizontal contents:first-child:not(:only-child) > trough > slider:backdrop:disabled {
     margin: -9px;
     border-style: none;
@@ -2923,7 +2964,10 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough > trough > slider, scale.vertical contents:last-child:not(:only-child) > trough > slider {
+  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-bottom: -11px; }
+  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider, scale.vertical contents:last-child:not(:only-child) > trough > slider {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2934,7 +2978,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough > trough > slider:hover, scale.vertical contents:last-child:not(:only-child) > trough > slider:hover {
+  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-left: -11px; }
+  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:hover, scale.vertical contents:last-child:not(:only-child) > trough > slider:hover {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2945,7 +2992,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough > trough > slider:active, scale.vertical contents:last-child:not(:only-child) > trough > slider:active {
+  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-left: -11px; }
+  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:active, scale.vertical contents:last-child:not(:only-child) > trough > slider:active {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2956,7 +3006,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough > trough > slider:disabled, scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled {
+  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-left: -11px; }
+  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:disabled, scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2967,7 +3020,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough > trough > slider:backdrop, scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop {
+  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-left: -11px; }
+  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:backdrop, scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2978,7 +3034,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough > trough > slider:backdrop:disabled, scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop:disabled {
+  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-left: -11px; }
+  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:backdrop:disabled, scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop:disabled {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2989,7 +3048,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough > trough > slider, scale.vertical contents:first-child:not(:only-child) > trough > slider {
+  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-left: -11px; }
+  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider, scale.vertical contents:first-child:not(:only-child) > trough > slider {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -3000,7 +3062,10 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough > trough > slider:hover, scale.vertical contents:first-child:not(:only-child) > trough > slider:hover {
+  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-right: -11px; }
+  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:hover, scale.vertical contents:first-child:not(:only-child) > trough > slider:hover {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -3011,7 +3076,10 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough > trough > slider:active, scale.vertical contents:first-child:not(:only-child) > trough > slider:active {
+  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-right: -11px; }
+  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:active, scale.vertical contents:first-child:not(:only-child) > trough > slider:active {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -3022,7 +3090,10 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough > trough > slider:disabled, scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled {
+  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-right: -11px; }
+  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:disabled, scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -3033,7 +3104,10 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough > trough > slider:backdrop, scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop {
+  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-right: -11px; }
+  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:backdrop, scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -3044,7 +3118,10 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough > trough > slider:backdrop:disabled, scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop:disabled {
+  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-right: -11px; }
+  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:backdrop:disabled, scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop:disabled {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -3055,6 +3132,9 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
+  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-right: -11px; }
 
 /*****************
  * Progress bars *

diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index d4a1106f126a84bcd45c5676733e2ebde7e8fb5a..75a3c43d0c989e8e8b2e78ed06d5974c56ede9d5 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -2679,20 +2679,7 @@ scale highlight, progressbar progress {
 scale {
   min-height: 10px;
   min-width: 10px;
-  padding: 12px;
-  /*
-      &.top {
-        margin-bottom: $_marks_distance;
-        margin-top: -($_marks_distance+$_marks_lenght);
-      }
-  
-      &.bottom {
-        margin-top: $_marks_distance;
-      }
-      &.left { margin-right: $_marks_distance; }
-      &.right { margin-left: $_marks_distance; }
-    }
-  */ }
+  padding: 12px; }
   scale fill,
   scale highlight {
     margin: -1px; }
@@ -2702,9 +2689,14 @@ scale {
     margin: -8px; }
   scale.fine-tune slider {
     margin: -6px; }
+  scale.fine-tune fill,
+  scale.fine-tune highlight,
+  scale.fine-tune trough {
+    border-radius: 5px;
+    -gtk-outline-radius: 7px; }
   scale trough {
     outline-offset: 2px;
-    -gtk-outline-radius: 4px; }
+    -gtk-outline-radius: 5px; }
   scale fill, scale fill:backdrop {
     background-color: #9d9d99;
     box-shadow: none; }
@@ -2810,19 +2802,35 @@ scale {
     scale marks.bottom {
       margin-top: 6px;
       margin-bottom: -12px; }
-    scale marks.left {
+    scale marks.top {
       margin-right: 6px;
       margin-left: -12px; }
-    scale marks.right {
+    scale marks.bottom {
       margin-left: 6px;
       margin-right: -12px; }
+  scale.fine-tune marks.top {
+    margin-bottom: 6px;
+    margin-top: -10px; }
+  scale.fine-tune marks.bottom {
+    margin-top: 6px;
+    margin-bottom: -10px; }
+  scale.fine-tune marks.left {
+    margin-right: 6px;
+    margin-left: -10px; }
+  scale.fine-tune marks.right {
+    margin-left: 6px;
+    margin-right: -10px; }
   scale.horizontal indicator {
     min-height: 6px;
     min-width: 1px; }
+  scale.horizontal.fine-tune indicator {
+    min-height: 4px; }
   scale.vertical indicator {
     min-height: 1px;
     min-width: 6px; }
-  scale.color.horizontal trough > trough > slider, scale.horizontal contents:last-child:not(:only-child) > trough > slider {
+  scale.vertical.fine-tune indicator {
+    min-width: 4px; }
+  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider, scale.horizontal contents:last-child:not(:only-child) > trough > slider {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2833,7 +2841,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough > trough > slider:hover, scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover {
+  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-top: -11px; }
+  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:hover, scale.horizontal contents:last-child:not(:only-child) > trough > slider:hover {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2844,7 +2855,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough > trough > slider:active, scale.horizontal contents:last-child:not(:only-child) > trough > slider:active {
+  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-top: -11px; }
+  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:active, scale.horizontal contents:last-child:not(:only-child) > trough > slider:active {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2855,7 +2869,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough > trough > slider:disabled, scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled {
+  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-top: -11px; }
+  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:disabled, scale.horizontal contents:last-child:not(:only-child) > trough > slider:disabled {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2866,7 +2883,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough > trough > slider:backdrop, scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop {
+  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-top: -11px; }
+  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:backdrop, scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2877,7 +2897,10 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.horizontal trough > trough > slider:backdrop:disabled, scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop:disabled {
+  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-top: -11px; }
+  scale.color.horizontal trough contents:last-child:not(:only-child) > trough > slider:backdrop:disabled, scale.horizontal contents:last-child:not(:only-child) > trough > slider:backdrop:disabled {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2888,6 +2911,9 @@ scale {
     background-position: top;
     background-repeat: no-repeat;
     box-shadow: none; }
+  scale.color.horizontal trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.horizontal.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-top: -11px; }
   scale.horizontal contents:first-child:not(:only-child) > trough > slider {
     margin: -9px;
     border-style: none;
@@ -2899,6 +2925,9 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
+  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-bottom: -11px; }
   scale.horizontal contents:first-child:not(:only-child) > trough > slider:hover {
     margin: -9px;
     border-style: none;
@@ -2910,6 +2939,9 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
+  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-bottom: -11px; }
   scale.horizontal contents:first-child:not(:only-child) > trough > slider:active {
     margin: -9px;
     border-style: none;
@@ -2921,6 +2953,9 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
+  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-bottom: -11px; }
   scale.horizontal contents:first-child:not(:only-child) > trough > slider:disabled {
     margin: -9px;
     border-style: none;
@@ -2932,6 +2967,9 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
+  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-bottom: -11px; }
   scale.horizontal contents:first-child:not(:only-child) > trough > slider:backdrop {
     margin: -9px;
     border-style: none;
@@ -2943,6 +2981,9 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
+  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-bottom: -11px; }
   scale.horizontal contents:first-child:not(:only-child) > trough > slider:backdrop:disabled {
     margin: -9px;
     border-style: none;
@@ -2954,7 +2995,10 @@ scale {
     background-position: bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough > trough > slider, scale.vertical contents:last-child:not(:only-child) > trough > slider {
+  scale.horizontal.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-bottom: -11px; }
+  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider, scale.vertical contents:last-child:not(:only-child) > trough > slider {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2965,7 +3009,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough > trough > slider:hover, scale.vertical contents:last-child:not(:only-child) > trough > slider:hover {
+  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-left: -11px; }
+  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:hover, scale.vertical contents:last-child:not(:only-child) > trough > slider:hover {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2976,7 +3023,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough > trough > slider:active, scale.vertical contents:last-child:not(:only-child) > trough > slider:active {
+  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-left: -11px; }
+  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:active, scale.vertical contents:last-child:not(:only-child) > trough > slider:active {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2987,7 +3037,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough > trough > slider:disabled, scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled {
+  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-left: -11px; }
+  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:disabled, scale.vertical contents:last-child:not(:only-child) > trough > slider:disabled {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -2998,7 +3051,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough > trough > slider:backdrop, scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop {
+  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-left: -11px; }
+  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:backdrop, scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -3009,7 +3065,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(rtl) trough > trough > slider:backdrop:disabled, scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop:disabled {
+  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-left: -11px; }
+  scale.color.vertical:dir(rtl) trough contents:last-child:not(:only-child) > trough > slider:backdrop:disabled, scale.vertical contents:last-child:not(:only-child) > trough > slider:backdrop:disabled {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -3020,7 +3079,10 @@ scale {
     background-position: left bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough > trough > slider, scale.vertical contents:first-child:not(:only-child) > trough > slider {
+  scale.color.vertical:dir(rtl) trough.fine-tune contents:last-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:last-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-left: -11px; }
+  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider, scale.vertical contents:first-child:not(:only-child) > trough > slider {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -3031,7 +3093,10 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough > trough > slider:hover, scale.vertical contents:first-child:not(:only-child) > trough > slider:hover {
+  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-right: -11px; }
+  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:hover, scale.vertical contents:first-child:not(:only-child) > trough > slider:hover {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -3042,7 +3107,10 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough > trough > slider:active, scale.vertical contents:first-child:not(:only-child) > trough > slider:active {
+  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-right: -11px; }
+  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:active, scale.vertical contents:first-child:not(:only-child) > trough > slider:active {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -3053,7 +3121,10 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough > trough > slider:disabled, scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled {
+  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-right: -11px; }
+  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:disabled, scale.vertical contents:first-child:not(:only-child) > trough > slider:disabled {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -3064,7 +3135,10 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough > trough > slider:backdrop, scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop {
+  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-right: -11px; }
+  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:backdrop, scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -3075,7 +3149,10 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
-  scale.color.vertical:dir(ltr) trough > trough > slider:backdrop:disabled, scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop:disabled {
+  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-right: -11px; }
+  scale.color.vertical:dir(ltr) trough contents:first-child:not(:only-child) > trough > slider:backdrop:disabled, scale.vertical contents:first-child:not(:only-child) > trough > slider:backdrop:disabled {
     margin: -9px;
     border-style: none;
     border-radius: 0;
@@ -3086,6 +3163,9 @@ scale {
     background-position: right bottom;
     background-repeat: no-repeat;
     box-shadow: none; }
+  scale.color.vertical:dir(ltr) trough.fine-tune contents:first-child:not(:only-child) > trough > slider, scale.vertical.fine-tune contents:first-child:not(:only-child) > trough > slider {
+    margin: -7px;
+    margin-right: -11px; }
 
 /*****************
  * Progress bars *